<template>
    <div class="main" v-if="isready">
        <topHeader :title="$t('oee.title')" :showTime="false"></topHeader>
        <div class="d-flex flex-row h-40 justify-content-between">

            <div class="d-flex flex-column w-50 bg-custom m-2 p-2 pl-3 Month-lineCharts--wrap">
                <p class="text-white text-custom-2  text-custom-bg">
                    {{ $t('oee.module1') }}
                </p>
                <compositeLineOEE :dataX="MonthdataX" :dataY="MonthdataY" :width="getScreenWidth / 2.1" class="h-90"
                    :color="'rgb(219, 89, 149'">
                </compositeLineOEE>
            </div>
            <div class="d-flex flex-column w-50 bg-custom m-2 p-2 pl-3 day-lineCharts--wrap" ref="getheight">
                <p class="text-white text-custom-2  text-custom-bg">
                    {{ $t('oee.module2') }}
                </p>
                <compositeLineOEE :dataX="DaydataX" :dataY="DaydataY" :width="getScreenWidth / 2.1" class="h-90"
                    :color="'rgb(144, 237, 125'">
                </compositeLineOEE>
            </div>

        </div>
        <div class="d-flex flex-row h-50 justify-content-between p-2" style="overflow: hidden;">
            <div class="d-flex flex-row w-100 bg-custom p-2 pl-3 machine-oee--list align-content-start">
                <p class="text-white text-custom-2 text-custom-bg ">
                    {{ $t('oee.module3') }}
                </p>
                
                <div class="swiper-container">
                    <div class="swiper-wrapper" :style="machineListData.length > 16 ? 'animation-duration:' + duration + 's' : ''">
                        <oeeGaugeSwiper :machineListData="machineListData"></oeeGaugeSwiper>
                    </div>

                    <div class="d-flex flex-row swiper-wrappers" :style="machineListData.length > 16 ? 'animation-duration:' + duration + 's' : ''" >
                        <oeeGaugeSwiper :machineListData="machineListData"></oeeGaugeSwiper>
                    </div>

                </div>
            </div>
        </div>
        <bottomFooter></bottomFooter>
    </div>
</template>
<script setup lang="ts">
///当天24小时综合OEE率趋势图 +近一月稼动率趋势图  + 当天所有机器OEE率
import topHeader from '@/components/topHeader/index.vue';
import bottomFooter from '@/components/bottomFooter/index.vue';
import compositeLineOEE from "@/components/compositeLineOEE/index.vue";
import oeeGaugeSwiper from './components/oeeGaugeSwiper.vue';
import $ from "jquery"
import dayjs from 'dayjs';
import 'swiper/css'

const { proxy } = getCurrentInstance() as any

interface machineDetail {
    machine: string,
    values: Array<number>
}
const isready = ref(false)
const DaydataX = ref([])
const DaydataY = ref([])
const MonthdataX = ref([])
const MonthdataY = ref([])
const machineListData = ref([] as machineDetail[])
const duration = ref(0)

//个位数首位加0
const formatter = (num: any) => {
    return (Array(2).join("0") + num).slice(-2);
}
const random = (min: any, max: any) => {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
const getScreenWidth: any = computed(() => proxy.$common.getScreenWidth())
onMounted(() => {
    isready.value = true;
    setDayOEEData();
    setMonthOEEData();
    seteachMachineOEEData();
    $(document).ready(function () {
        //设置自动滚动
        proxy.$common.hoverAction('.swiper-wrapper', '.swiper-wrapper')
        proxy.$common.hoverAction('.swiper-wrappers', '.swiper-wrapper')
    })
})
/**
 * 24小时综合OEE
 */
const setDayOEEData = () => {
    let timeArr: any = []
    let timeVal: any = []
    let date = new Date()
    let hours = date.getHours();
    for (let j = 0; j <= 23; j++) {
        timeArr.push(formatter(j) + ":00")
        if (j <= hours) {
            timeVal.push(random(40, 100))
        }
    }
    DaydataX.value = timeArr
    DaydataY.value = timeVal
}
/**
 * 30天综合OEE
 */
const setMonthOEEData = () => {
    let X: any = []
    let Y: any = []
    let maxDay = 30
    //近30天
    for (let i = 1, j = maxDay; i <= maxDay; i++, j--) {
        X.push(dayjs().subtract(j, 'days').format('MM-DD'))
        Y.push(random(45, 100))
    }
    MonthdataX.value = X
    MonthdataY.value = Y
}
/**
 * 全部机器OEE
 */
const seteachMachineOEEData = () => {
    let Data: any = []
    let item =  proxy.$common.machineList()
    for (let i = 0; i < item.length; i++) {
        Data.push({ machine: item[i].model, values: [random(0, 100)], index: i + 1 })
    }
    machineListData.value = Data
    duration.value = Data.length * 3
    console.log(machineListData)
}
</script>
  
<style scoped lang="less">


.machine-oee--list {
    flex-wrap: wrap;
}




.swiper-container {
    margin-left: auto;
    margin-right: auto;
    // position: relative;
    overflow: hidden;
    z-index: 1;
}

.swiper-container {
    width: 100%;
    height: 100%;
    display: flex;
    // overflow: initial !important;
}

.swiper-slide {
    width: 100%;
    color: #FFF;
}

.swiper-wrapper {
    position: relative;
    width: auto;
    animation-name: scrollTop;
    animation-duration: 0s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-delay: 1s;
}

@keyframes scrollTop {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }
}

.swiper-wrappers {
    position: absolute;
    animation-name: scrollTops;
    animation-duration: 0s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-delay: 1s;
}

@keyframes scrollTops {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-0%);
    }
}

.seamless-wrap {
    display: flex;
}

.progress {
    position: fixed;
    z-index: 111111;
    top: 7%;
    left: 0;
    width: 100%;
    height: 6px;
    border-radius: 0;
}

.progress-bars {
    background: #3fe7c8;
    height: 6px;
    width: 0%;
    animation-name: progress_width;
    animation-duration: 0s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-delay: 1s;
    animation-play-state: running;
}

@keyframes progress_width {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

.swiper-item {
    // margin: 0 1%;
    width: 12%;
    color: #FFF
}</style>